<template>
  <div>
    <p class="recom-p"><img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png">  热销推荐</p>
    <ul class="recom-ul">
      <li class="border-bottom" v-for="item of list" :key="item.id">
        <img :src="item.img" />
        <p class="text-h">{{ item.text1 }}</p>
        <p class="text-cour">{{ item.text2 }}</p>
        <router-link :to="'/daetails/'+item.id" tag="span">
          <span class="text-butt">查看详情</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
'use strict'
// let icon = [
//   { id: 1, img: 'https://imgs.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg', text1: '故宫', text2: '东方宫殿代表，世界宫殿建筑典范' },
//   { id: 2, img: 'https://imgs.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_200x200_ce3d2658.jpg', text1: '北京海洋馆', text2: '奇幻海洋之旅' },
//   { id: 3, img: 'https://imgs.qunarzz.com/sight/p0/1903/5d/5dcaf453dfd6f5dba3.img.jpg_200x200_51d03f19.jpg', text1: '古北水镇', text2: '走进那个画中的小镇' },
//   { id: 4, img: 'https://imgs.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_200x200_2458ffb2.jpg', text1: '八达岭长城', text2: '不到长城非好汉' }
// ]
export default {
  name: 'IndeRecom',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
.recom-p
  padding 0.3rem 0 0.3rem 0.2rem
  background #F5F5F5
  >img
    width 0.3rem
.recom-ul
  overflow hidden
  li
    margin 0.1rem 0 0 0
    padding-bottom 0.4rem
    img
      width 1.8rem
      height 1.8rem
      margin-left 0.1rem
      float left
    p,span
      position relative
      left 0.24rem
    .text-h
      font-size 0.36rem
      padding-top 0.16rem
    .text-cour
      color #CCCCCC
      padding 0.28rem 0 0.36rem 0
    .text-butt
      padding 0.06rem 0.2rem
      background #FF9300
      color white
      border-radius 0.06rem
</style>
